<template>
  <div id="app">
    <header>
      <h1><router-link to="/" class="primaryText">Luna Material · You</router-link></h1>
      <div class="toolBox">
        <!--        <LunaButton type="primary">Text</LunaButton>-->
      </div>
    </header>
    <aside>
      <p class="asideDesc">Basic · 基础说明</p>
      <router-link to="/Color" :class="{ active: $route.name === 'Color' }">Color · 色彩</router-link>
      <p class="asideDesc">Basic Components · 基础组件</p>
      <router-link to="/Button" :class="{ active: $route.name === 'Button' }">Button · 按钮</router-link>
    </aside>
    <div class="viewerArea">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dark: false,
      active: ''
    }
  },
  mounted() {
    window.document.documentElement.setAttribute('data-theme', 'dayLight')
  },
  methods: {
    switchTheme() {
      this.dark = !this.dark
      if (this.dark) {
        window.document.documentElement.setAttribute('data-theme', 'nightEye')
      } else {
        window.document.documentElement.setAttribute('data-theme', 'dayLight')
      }
    }
  }
}
</script>

<style lang="scss"></style>
